<template>
  <el-form :data="form">
    <el-form-item label="商品名称">
      <el-input v-model="form.keyword" />
    </el-form-item>
    <el-form-item>
      <el-button @click="searchHandle">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="list" border>
    <el-table-column prop="name" label="产品名称" />
    <el-table-column prop="description" label="产品介绍" />
  </el-table>
  <el-config-provider :locale="zhCn">
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="pageSizeChangeHandle"
      @current-change="pageChangeHandle"
    />
  </el-config-provider>
</template>

<script setup lang="ts">
import useTable from "@/hooks/useTable";
import { getProductListApi } from "./api";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { reactive } from "vue";

const form = reactive({
  keyword: "",
});

const {
  list,
  pageNum,
  pageSize,
  total,
  pageChangeHandle,
  pageSizeChangeHandle,
  searchHandle,
} = useTable(getProductListApi, form);
</script>

<style lang="less" scoped></style>
